<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>订单列表</title>
    <link href="/js/elementui/index.css" rel="stylesheet"/>
</head>

<body>
<div id="app">
    <div  style="float:left">
        <el-row class="tac">
            <el-col :span="25">
                <h3>订单类型</h3>
                <el-menu
                        default-active="1"
                        class="el-menu-vertical-demo"
                        @open="handleOpen"
                        @close="handleClose">
                    <el-menu-item index="1">
                        <i class="el-icon-menu"></i>
                        <span slot="title" @click="refresh">全部订单({{allOrderNum}})</span>
                    </el-menu-item>
                    <el-menu-item index="2">
                        <i class="el-icon-setting"></i>
                        <span slot="title" @click="findByStatus(4)">已完成({{completeNum}})</span>
                    </el-menu-item>
                    <el-menu-item index="3">
                        <i class="el-icon-setting"></i>
                        <span slot="title" @click="findByStatus(1)">待支付({{waitPayNum}})</span>
                    </el-menu-item>
                    <el-menu-item index="4">
                        <i class="el-icon-setting"></i>
                        <span slot="title" @click="findByStatus(2)">待发货({{waitSendNum}})</span>
                    </el-menu-item>
                    <el-menu-item index="5">
                        <i class="el-icon-setting"></i>
                        <span slot="title" @click="findByStatus(3)">已发货({{completeSendNum}})</span>
                    </el-menu-item>
                </el-menu>
            </el-col>
        </el-row>
    </div>

    <div style="float:left">
        <!--交易订单列表-->
        <div class="block">
            <el-button type="warning" icon="el-icon-plus" @click="dialogFormVisible = true">添加订单</el-button>
            <label>订单编号</label>
            <el-input v-model="orderId" style="width: 140px" placeholder="输入订单编号"></el-input>
            <label>交易时间</label>
            <span class="demonstration"></span>
            <el-date-picker
                    v-model="dateValue"
                    type="date"
                    placeholder="选择日期">
            </el-date-picker>
            <el-button type="primary" icon="el-icon-search" @click="selectDate">查询</el-button>
        </div>
        <el-table
                :data="tableData"
                border
                style="width: 100%">
            <el-table-column
                    label="序号">
                <template slot-scope="scope">
                    <span style="margin-left: 10px;width: 20px">{{scope.row.id}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="订单编号">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{scope.row.orderId}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="订单类型">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{scope.row.orderType}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="产品名称">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{scope.row.productName}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="客户名称">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{scope.row.name}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="支付方式">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{scope.row.payType}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="交易金额">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{scope.row.money}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="交易时间">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{scope.row.dealTime}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="所属分类">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{scope.row.productKind}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="数量">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{scope.row.number}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="状态">
                <template slot-scope="scope">
                    <span style="margin-left: 10px;background-color:#00FF7F;color: white" v-if="scope.row.allstatus=='已发货'||scope.row.allstatus=='已完成'||scope.row.allstatus=='待生产'">{{scope.row.allstatus}}</span>
                    <span style="margin-left: 10px;background-color:#FF0000;color: white" v-if="scope.row.allstatus=='待支付'||scope.row.allstatus=='待发货'||scope.row.allstatus=='待排单'">{{scope.row.allstatus}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="说明">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{scope.row.explains}}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--分页按钮-->
        <el-pagination
                big
                @size-change="handleSizeChange"
                @current-change="loadPage"
                :total="total"
                :current-page="current"
                :page-sizes="[5, 10, 20, 30]"
                :page-size="pageSize"
                layout="sizes,prev, pager, next">
        </el-pagination>
        <!--添加弹窗-->
        <el-dialog title="新增订单" :visible.sync="dialogFormVisible" @close="closeMyDialog">
            <el-form :model="order">
                <el-form-item label="订单编号" :label-width="formLabelWidth">
                    <el-input v-model="order.orderId" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="订单类型" :label-width="formLabelWidth">
                    <el-input v-model="order.orderType" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="产品名称" :label-width="formLabelWidth">
                    <el-select v-model="order.productName" placeholder="请选择商品">
                        <el-option
                                v-for="item in products"
                                :label="item.productName"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="客户名称" :label-width="formLabelWidth">
                    <el-input v-model="order.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="支付方式" :label-width="formLabelWidth">
                    <el-input v-model="order.payType" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="交易金额" :label-width="formLabelWidth">
                    <el-input v-model="order.money" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="数量" :label-width="formLabelWidth">
                    <el-input v-model="order.number" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-select v-model="order.orderStatus" placeholder="请选择当前订单状态">
                        <el-option
                                v-for="orderStatus in orderStatusList"
                                :label="orderStatus.allStatus"
                                :value="orderStatus.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="说明" :label-width="formLabelWidth">
                    <el-input v-model="order.explains" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveOrder">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</div>
<script src="/js/vue/vue.js"></script>
<script src="/js/axios/axios.min.js"></script>
<script src="/js/qs/qs.min.js"></script>
<!-- 引入组件库 -->
<script src="/js/elementui/index.js"></script>
<script type="text/javascript">
    var vue=new Vue({
        el:"#app",
        data() {
            return {
                orderStatusList:null,//下拉框选中自定义实体对象
                tableData: null,//表数据
                total:0,//总条数
                current:0,//当前页数
                pageSize:10,//每页条数
                current2:0,//最新页数
                order:{
                    id:"",
                    orderId:"",
                    orderType:"",
                    //产品名称
                    productName:"",
                    //客户名称
                    name:"",
                    payType:"",
                    money:"",
                    //差一个所属分类
                    productKind:"",
                    number:"",
                    orderStatus:"",
                    explains:"",
                    //订单状态信息
                    allstatus:""
                },
                dialogFormVisible: false,
                formLabelWidth: '120px',
                orderId:"",
                dateValue: '',
                //所有订单数
                allOrderNum:'',
                //已完成订单数
                completeNum:'',
                //待支付
                waitPayNum:'',
                //待发货
                waitSendNum:'',
                //已发货
                completeSendNum:'',
                key:'0',
                products:null
            }
        },
        methods: {
            //获取状态的下拉列表
            getchioce(){
                axios.get("/orderStatus").then(value => {
                    this.orderStatusList=value.data.data;
                });
            },
            //显示编辑页面
            handleEdit(index, row){
                //row对应一行数据
                console.log(index, row);
                this.order = row;
                this.dialogFormVisible = true;
            },
            //删除订单
            handleDelete(index, row,current){
                var page=this.current;
                // alert("index:"+index+"current:"+current);
                console.log(index, row);
                //删除
                axios.delete("/order/"+row.id).then(value => {
                    if(value){
                        this.loadPage(page);
                        this.clearOrderNum();
                        this.selectOrderNum();
                    }
                });
                this.dialogFormVisible = false;
            },
            //
            handleSizeChange(val) {
                var page=this.current;
                this.pageSize=val;
                this.loadPage(page);
            },
            //记载分页
            loadPage(current){
                this.current = current;
                //查询分页商品数据
                axios.get("/order/" + current+"/"+this.pageSize+"/"+this.key).then(value => {
                    if (value.data.code == 1) {
                        this.tableData = value.data.data.records;
                        this.total = value.data.data.total;
                        this.current = value.data.data.current;
                        // alert("全部订单"+this.allOrderNum);
                        console.log(this.key);
                    }
                });

            },
            selectOrderNum(){
                //查询所有订单
                axios.get("/order").then(value => {
                    // alert(value.data.data.length);
                    //所有订单数
                    this.allOrderNum=value.data.data.length;
                    // alert(value.data.data[0].orderStatus);
                    if (value.data.code == 1) {
                        for(i=0;i<value.data.data.length;i++){
                            if(value.data.data[i].orderStatus=="4"){
                                this.completeNum=Number(this.completeNum)+1;
                            }else if(value.data.data[i].orderStatus=="2"){
                                this.waitSendNum=Number(this.waitSendNum)+1;
                            }else if(value.data.data[i].orderStatus=="1"){
                                this.waitPayNum=Number(this.waitPayNum)+1;
                            }else if(value.data.data[i].orderStatus=="3"){
                                this.completeSendNum=Number(this.completeSendNum)+1;
                            }
                        }
                        // alert("已完成"+this.completeNum+",待支付"+this.waitPayNum+",待发货"+this.waitSendNum+",已发货"+this.completeSendNum)
                    }
                });
            },
            //调用selectOrderNum()函数前要先清楚订单数据，否则数据会递增
            clearOrderNum(){
                this.allOrderNum="";
                this.completeNum="";
                this.waitSendNum="";
                this.waitPayNum="";
                this.completeSendNum="";
            },
            saveOrder(){
                var page=this.current;
                //如果没有商品id，则为添加新商品
                if(this.order.id==""){
                    axios.post("/order", this.order
                    ).then(value => {
                        alert("新增成功！");
                        if(value){
                            this.loadPage(page);
                            this.clearOrderNum();
                            this.selectOrderNum();
                        }
                    })
                }else{
                    axios.put("/order",this.order
                    ).then(value => {
                        alert("更新成功！");
                        if(value){
                            this.loadPage(page);
                            this.clearOrderNum();
                            this.selectOrderNum();
                        }
                    })
                }
                this.dialogFormVisible = false;
            },
            //关闭对话框
            closeMyDialog(){
                //清空数据
                this.order = {      //产品对话框的数据
                    id: '',
                    orderId:'',
                    orderType:'',
                    productName:'',
                    name:'',
                    payType:'',
                    money:'',
                    dealTime:'',
                    productKind:'',
                    number:'',
                    orderStatus:'',
                    explains:'',
                    allstatus:''
                }
            },
            //根据条件查询数据
            selectDate(){
                if(this.orderId.length==0 && this.dateValue.length==0){
                    alert("请输入查询数据");
                }else {
                    // alert(this.orderId);
                    // alert(this.dateValue);
                    var dictTime = new Date(this.dateValue);
                    var changeDate = dictTime.getFullYear() + '-' + (dictTime.getMonth() + 1) + '-' + dictTime.getDate();
                    // alert(changeDate);
                    axios.post("/order/select", {
                        orderId: this.orderId,
                        dateValue: changeDate
                    }).then(value => {
                        // alert("条件查询" + value.data.data);
                        if (value.data.code == 1) {
                            this.tableData = value.data.data;
                            this.total = value.data.data.length;
                            // this.current = value.data.data.current;
                            alert(this.total);
                        }
                    });
                }
            },
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            //全部订单刷新页面
            refresh(){
                var page=this.current;
                this.loadPage(page);
                this.key="0";
            },
            //查询对应状态的订单
            findByStatus(orderStatueValue){
                // alert(orderStatueValue);
                this.order.orderStatus=orderStatueValue;
                // alert(this.order.orderStatus);
                axios.post("/order/status",this.order).then(value => {
                    if(value.data.code == 1){
                        this.tableData = value.data.data;
                        this.total = value.data.data.length;
                        this.key=orderStatueValue;
                        console.log(this.key);
                    }
                })
            }
        },
        mounted(){
            //调用loadPage函数，设置分页数据，向后台传递参数
            axios.get("/product-companyId").then(value=>{
                if(value.data.code == 1){
                    this.products=value.data.data;
                }
            })
            this.loadPage(1);
            this.selectOrderNum();
            this.getchioce();
        },
    });
</script>
</body>
</html>